<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="${#request.getContentType() + '/webcon/resources/'}"/>
    <title>双向对讲</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <style>
        .btn-large-dim {
            width: 80px;
            height: 80px;
            font-size: 10px;
            margin-bottom: 0px;
        }

        /*.left_content1 {
            height: 300px;
        }

        .left_content2 {
            height: 300px;
        }

        .right_content {
            height: 600px;
        }*/
    </style>

    <!-- <script src="webrtc/jquery.min.js"></script>
     <script src="webrtc/bootstrap.min.js"></script>
     <script src="webrtc/ekko-lightbox.min.js"></script>
     <script src="webrtc/draggabilly.pkgd.min.js"></script>
     <script src="webrtc/adapter.js"></script>
     <script src="webrtc/index2.js"></script>

     <script src="webrtc/kurento-utils.js"></script>
     <script src="webrtc/index.js"></script>-->


    <!--引入webuploader
    <link rel="stylesheet" type="text/css" href="widget/webuploader/webuploader.css">
    <script type="text/javascript" src="widget/webuploader/webuploader.min.js"></script>
    <script type="text/javascript" src="myjs/upload.js"></script>-->

    <!-- 引入ztree -->
    <link rel="stylesheet" href="widget/zTree/zTreeStyle/zTreeStyle.css"/>
    <script type="text/javascript" src="widget/zTree/jquery.ztree.all.min.js"></script>

    <!-- 实时寻呼 -->
    <!--<link rel="shortcut icon" href="webrtc/kurento.png"
          type="image/png">
    <link rel="stylesheet" href="webrtc/bootstrap.min.css">
    <link rel="stylesheet" href="webrtc/ekko-lightbox.min.css">
    <link rel="stylesheet" href="webrtc/index.css">
    <link rel="stylesheet" href="webrtc/kurento.css">-->
    <!--<script src="webrtc/jquery.min.js"></script>-->
    <script src="webrtc/bootstrap.min.js"></script>
    <script src="webrtc/ekko-lightbox.min.js"></script>
    <script src="webrtc/draggabilly.pkgd.min.js"></script>
    <script src="webrtc/adapter.js"></script>
    <script src="webrtc/index2.js"></script>
    <script src="webrtc/kurento-utils.js"></script>
    <script src="webrtc/index_duijiang.js"></script>
    <script src="webrtc/heart.js"></script>

    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myztree.js'}"></script>
    <script type="text/javascript" th:src="${#request.getContextPath() + '/commons/js/myajax.js'}"></script>


    <script th:inline="javascript">
        $(function () {
            //动态计算高度
            autoHeight();

            //初始化树形结构
            getWebconClientZtree("ztree_div", {
                check: true,
                showIcon: true
            });

            //初始化webrtc
            initWsRtc({
                url: [[${wsPath}]],
                name: [[${account}]]
            });

        });


        /**
         * 手动执行
         */
        var statusRtc = false;
        function action_task() {

            var ztreeObj = getZtree();
            var znodes = ztreeObj.getCheckedNodes(true);
            var terminal = [];
            for (var i = 0; i < znodes.length; i++) {
                if (znodes[i].isClient == 1 && znodes[i].isOnLine == 1) {
                    //如果是终端
                    terminal.push(znodes[i].userid + "");
                }
            }

            if(terminal.length <= 0){
                alert("请选择一台上线终端！");
                return;
            }

            if(terminal.length > 1){
                alert("最多只能选择一台对讲终端！");
                return;
            }

            if(!statusRtc){
                statusRtc = true;
                call(terminal);
            }
        }


        /**
         * 手动停止
         */
        function stop_task() {
            if(statusRtc){
                statusRtc = false;
                stop();
            }
        }

    </script>

    <!-- 日期插件 -->
    <link rel="stylesheet"
          th:href="${#request.getContextPath() + '/resources/widget/My97DatePicker/skin/WdatePicker.css'}"
          type="text/css"/>
    <script type="text/javascript"
            th:src="${#request.getContextPath() + '/resources/widget/My97DatePicker/WdatePicker.js'}"></script>


</head>
<body>
<!-- 顶部 -->
<div class="row border-bottom white-bg dashboard-header myheader" style="padding: 10px 10px 10px 10px">

    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="action_task();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/dsyy_play.png"/><br/>
        手动执行
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button" onclick="stop_task();">
        <img style="width: 50px; height: 50px; margin-bottom: 5px" src="icon/dsyy_stop.png"/><br/>
        手动停止
    </button>
    <!--<button class="btn btn-primary dim btn-large-dim" type="button">
        录音设置
    </button>
    <button class="btn btn-primary dim btn-large-dim" type="button">
        声卡设置
    </button>-->
</div>
<!-- 工作区 -->
<div class="animated fadeInRight">
    <!-- <div class="row">
         <div class="col-lg-12" style="padding: 0px;">
             <div class="ibox float-e-margins">
                 &lt;!&ndash;<div class="ibox-title">
                     <h5>
                         采样频率：
                         <select id="cypl">
                             <option value="1">8000Hz</option>
                             <option value="2">16000Hz</option>
                             <option value="3">22050Hz</option>
                             <option value="4">32000Hz</option>
                             <option value="5" selected>44100Hz</option>
                         </select>
                         &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                         采集方案：
                         <select id="cjfa">
                             <option value="1">麦克风采集</option>
                             <option value="2">立体混音采集</option>
                         </select>
                     </h5>
                 </div>&ndash;&gt;
                &lt;!&ndash; <div class="ibox-content  h_1" style="padding: 0px;">

                     <div class="col-lg-3" style="padding: 4px">
                         <div class="ibox float-e-margins" style="margin-bottom: 0px">
                             <div class="ibox-content my-sroll" style="height: 100%;">

                                 &lt;!&ndash; 树形选择器 &ndash;&gt;
                                 <div id="ztree_div" class="ztree"
                                      style="height: 100%; overflow:scroll; overflow-y: auto; overflow-x: auto;"></div>
                             </div>
                         </div>
                     </div>
                 </div>&ndash;&gt;
                     &lt;!&ndash;<div class="row">
                         <div class="col-md-5">
                             <label class="control-label" for="name">Name</label>
                             <div class="row">
                                 <div class="col-md-6">
                                     <input id="name" name="name" class="form-control" type="text" onkeydown="if (event.keyCode == 13) register();">
                                 </div>
                                 <div class="col-md-6 text-right">
                                     <a id="register" class="btn btn-primary" onclick="register()"><span class="glyphicon glyphicon-plus"></span> Register</a>
                                 </div>
                             </div>

                             <br> <br> <label class="control-label" for="peer">Peer</label>
                             <div class="row">
                                 <div class="col-md-6">
                                     <input id="peer" name="peer" class="form-control" type="text" onkeydown="if (event.keyCode == 13) call();">
                                 </div>
                                 <div class="col-md-6 text-right">
                                     <a id="call" class="btn btn-success" onclick="call()"><span class="glyphicon glyphicon-play"></span> Call</a>
                                     <a id="terminate"  class="btn btn-danger" disabled="disabled"><span class="glyphicon glyphicon-stop"></span> Stop</a>
                                 </div>
                             </div>
                             <br> <label class="control-label" for="console">Console</label><br>
                             <br>
                             <div id="console" class="democonsole">
                                 <ul></ul>
                             </div>
                         </div>
                         <div class="col-md-7">
                             <div id="videoBig">
                                 <video id="videoOutput" autoplay="" width="640px" height="480px" poster="img/webrtc.png"></video>
                             </div>
                             <div id="videoSmall" style="touch-action: none;">
                                 <video id="videoInput" autoplay="" width="240px" height="180px" poster="img/webrtc.png"></video>
                             </div>
                         </div>
                     </div>&ndash;&gt;
             </div>
         </div>
     </div>-->
    <div class="row">
        <div class="col-lg-5" style="padding: 2px 2px 2px 2px; margin-bottom: 2px;">
            <div class="ibox float-e-margins" style="margin-bottom: 2px">
                <div class="ibox-content left_content1 h_1">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title" style="border-width: 0px 0px 0px;">
                            <h5>终端列表</h5>
                        </div>
                        <div class="ibox-content" style="padding-left: 0px; padding-right: 0px; padding-top: 10px; height: 700px; overflow:scroll; overflow-y: auto; overflow-x: auto;">
                            <!-- TODO 终端列表 -->
                            <!-- 树形选择器 -->
                            <div id="ztree_div" class="ztree"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7" style="padding: 2px 2px 2px 2px; margin-bottom: 2px;">
            <div class="ibox float-e-margins">
                <div class="ibox-content right_content h_1">

                    <!-- TODO 对方机器视频输出流 -->
                    <div id="videoBig">
                        <video id="videoOutput" autoplay="" style="border: 1px solid #ccc; height: 350px;"></video>
                    </div>


                    <!-- TODO 本机视频输出流 -->
                    <div id="videoSmall" style="touch-action: none; margin-top: 20px;">
                        <video id="videoInput" autoplay="" style="border: 1px solid #ccc; height: 350px;"></video>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="console" class="democonsole" style="display: none;">
        <ul></ul>
    </div>
</div>

</body>
</html>